<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片预加载之无序加载</title>
    <style>
        html, body {
            width: 100%;
            height: 100%;
        }

        a {
            text-decoration: none;
        }

        .box {
            text-align: center;
        }

        .btn {
            display: inline-block;
            height: 30px;
            line-height: 30px;
            border: 1px solid #CCC;
            background-color: #FFF;
            padding: 0 10px;
            margin-right: 50px;
            color: #333;
        }

        .btn:hover {
            background-color: #EEE;
        }

        .loading {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #eee;
            text-align: center;
            font-size: 30px;
        }

        .progress {
            margin-top: 300px;
        }
    </style>
</head>
<body>
<div class="box">
    <img src="http://img5.duitang.com/uploads/blog/201601/20/20160120214503_4d2am.jpeg" alt="pic" id="img" width="1200">
    <p>
        <a href="javascript:;" class="btn" data-control="prev">上一页</a>
        <a href="javascript:;" class="btn" data-control="next">下一页</a>
    </p>
</div>

<div class="loading">
    <p class="progress">0%</p>
</div>

<script src="js/jquery-3.2.1.js"></script>
<script src="js/preload.js"></script>
<script>
    //    var imgs = [
    //        "http://img5.duitang.com/uploads/blog/201601/20/20160120214503_4d2am.jpeg",
    //        "http://pic1.win4000.com/wallpaper/e/5750fc317b253.jpg",
    //        "http://img.sgamer.com/lol_sgamer_com/images/20141117/c6d40163fbd8a16d7b64efb2ee91af70.jpg",
    //        "http://pic109.nipic.com/file/20160911/23739541_142127046030_2.jpg",
    //        "http://pic1.win4000.com/wallpaper/1/55f12443db806.jpg",
    //        "http://e.hiphotos.baidu.com/zhidao/pic/item/a1ec08fa513d269755731e3856fbb2fb4316d836.jpg"
    //    ];
    //
    //    var index = 0,
    //        len = imgs.length,
    //        count = 0,
    //        $progress = $('.progress');
    //
    //    $.each(imgs, function (i, src) {
    //        var imgObj = new Image();
    //
    //        $(imgObj).on('load error', function () {
    //            $progress.html(Math.round((count + 1) / len * 100) + '%');
    //
    //            if (count >= len - 1) {
    //                $('.loading').hide();
    //                document.title = '1/' + len;
    //            }
    //            count++;
    //        });
    //        imgObj.src = src;
    //    });
    //
    //    $('.btn').on('click', function () {
    //        if ($(this).data('control') === 'prev') {//上一张
    //            index = Math.max(0, --index)
    //        } else {//下一张
    //            index = Math.min(len - 1, ++index);
    //        }
    //        document.title = (index + 1) + '/' + len;
    //        $('#img').attr('src', imgs[index]);
    //    });


    var imgs = [
        "http://img5.duitang.com/uploads/blog/201601/20/20160120214503_4d2am.jpeg",
        "http://pic1.win4000.com/wallpaper/e/5750fc317b253.jpg",
        "http://img.sgamer.com/lol_sgamer_com/images/20141117/c6d40163fbd8a16d7b64efb2ee91af70.jpg",
        "http://pic109.nipic.com/file/20160911/23739541_142127046030_2.jpg",
        "http://pic1.win4000.com/wallpaper/1/55f12443db806.jpg",
        "http://e.hiphotos.baidu.com/zhidao/pic/item/a1ec08fa513d269755731e3856fbb2fb4316d836.jpg"
    ];

    var index = 0,
        len = imgs.length,
        $progress = $('.progress');

    $.preload(imgs, {
        each: function (count) {
            $progress.html(Math.round((count + 1) / len * 100) + '%');
        },
        all: function () {
            $('.loading').hide();
            document.title = '1/' + len;
        }
    });


    $('.btn').on('click', function () {
        if ($(this).data('control') === 'prev') {//上一张
            index = Math.max(0, --index)
        } else {//下一张
            index = Math.min(len - 1, ++index);
        }
        document.title = (index + 1) + '/' + len;
        $('#img').attr('src', imgs[index]);
    });
</script>
</body>
</html>